<template>  
  <view class="panel hot">  
    <view class="item" v-for="item in 2" :key="item">  
      <view class="title">  
        <text class="title-text">特惠推荐</text>  
        <text class="title-desc">精选全攻略</text>  
      </view>  
      <navigator hover-class="none" url="/pages/hot/hot" class="cards">  
        <image class="image" src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_small_1.jpg"></image>  
        <image class="image" src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_small_2.jpg"></image>  
      </navigator>  
    </view>  
  </view>  
</template>  
  
<style lang="scss">  
.hot {  
  display: flex;  
  flex-wrap: wrap;  
  margin: 20rpx;  
  background-color: #fff;  
  
  .item {  
    width: 49%;  
    border-right: 1rpx solid #eee;  
    border-top: 1rpx solid #eee;  
    &:nth-child(2n) {  
      border-right: 0;  
    }  
    &:nth-child(-n + 2) {  
      border-top: 0;  
    }  
    .title {  
      padding: 24rpx;  
      font-size: 32rpx;  
      color: #262626;  
      .title-desc {  
        font-size: 24rpx;  
        color: #7f7f7f;  
        margin-left: 18rpx;  
      }  
    }  
    .cards {  
      padding: 15rpx 20rpx;  
      display: flex;  
      justify-content: space-between;  
      .image {  
        width: 150rpx;  
        height: 150rpx;  
      }  
    }  
  }  
}  
</style>